import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

interface Props {
    icon:any,
    title:string
}

import * as Const from './../../../const';

class ItemRow extends PureComponent<Props> {
    static defaultProps = {
        icon:``,
        title:``
    }

    render() {
        const {
            icon,
            title,
            children
        } = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Image
                        source={icon}
                        style={styles.iconStyle}
                    />
                    <Text style={styles.title}>
                        {title}
                    </Text>
                </View>
                <View style={styles.content}>
                    {children}
                </View>
            </View>
        )
    }
}

export default ItemRow;

const styles = StyleSheet.create({
    iconStyle:{
        width:20,
        height:20
    },
    container:{
        paddingVertical:14,
        paddingHorizontal:16
    },
    header:{
        alignItems:`center`,
        flexDirection:`row`
    },
    content:{
        paddingTop:8,
        paddingLeft:28
    },
    title:{
        fontSize:14,
        color:`#fff`,
        marginLeft:8,
        fontFamily:Const.fontFamily
    }
}) as any;